ion-app.app-root {
  $translateList: 50px 100px 150px 200px 250px 300px 350px 400px 450px 500px;
  $slideOutFn: slideOut0 slideOut1 slideOut2 slideOut3 slideOut4 slideOut5 slideOut6 slideOut7 slideOut8 slideOut9;
  $slideOutTime: 0.4s 0.5s 0.6s 0.7s 0.8s 0.9s 1.0s 1.1s 1.2s 1.3s 1.4s 1.5s 1.6s;
  .side-menu{
    padding-bottom: 30px;
    overflow: hidden;
  }
  .nav-list {
    width: 72%;
    position: relative;
    .item-inner {
      background: url("../assets/imgs/border-bottom.png") left bottom no-repeat;
      border-bottom: none;
      background-size: 88%;
      padding-left: 40px;
    }
    &:before {
      width: 90px;
      height: 90px;
      content: '';
      background: url("../assets/imgs/light-ball.png") center center no-repeat;
      background-size: contain;
      position: absolute;
      right: -45px;
      bottom: -200px;
      z-index: 2;
    }
    &:after {
      content: '';
      width: 2px;
      background-color: #083d6d;
      position: absolute;
      top: 0;
      left: 100%;
      right: 0;
      bottom: 0;
      z-index: 1;
    }
  }
  .show-menu {
    @for $i from 1 to length($translateList)+1 {
      .item:nth-child(#{$i}) {
        -webkit-animation: nth($slideOutFn, $i) nth($slideOutTime, $i) ease 1;
        -o-animation: nth($slideOutFn, $i) nth($slideOutTime, $i) ease 1;
        animation: nth($slideOutFn, $i) nth($slideOutTime, $i) ease 1;
      }
      @keyframes slideOut#{$i} {
        0% {
          transform: translateX(nth($translateList, $i));
        }
        100% {
          transform: translateX(0);
        }
      }
      @-webkit-keyframes slideOut#{$i} {
        0% {
          transform: translateX(nth($translateList, $i));
        }
        100% {
          transform: translateX(0);
        }
      }
    }
    .nav-list:before {
      -webkit-animation: dropDown 1s 0.2s ease-out 1;
      -o-animation: dropDown 1s 0.2s ease-out 1;
      animation: dropDown 1s 0.2s ease-out 1;
    }
    .nav-list:after {
      -webkit-animation: dropDown 0.8s ease-out 1;
      -o-animation: dropDown 0.8s ease-out 1;
      animation: dropDown 0.8s ease-out 1;
    }
  }
  @keyframes dropDown {
    0% {
      transform: translateY(-800px);
    }
    100% {
      transform: translateY(0);
    }
  }
  @-webkit-keyframes dropDown {
    0% {
      transform: translateY(-800px);
    }
    100% {
      transform: translateY(0);
    }
  }

  .center-header {
    color: $color-thc-dark;
    padding: 15px 0 10px;

    .user {
      height: 50px;
      background: url("../assets/imgs/hello.png") left bottom no-repeat;
      background-size: contain;
      span {
        margin-left: 45px;
        position: relative;
        top: 8px;
      }
    }

    .animate {
      width: 60px;
      height: 60px;
      margin: auto;
      position: absolute;
      top: 0;
      right: 0;
      background: url("../assets/imgs/core.png") center center no-repeat;
      background-size: contain;
    }

    .rotate {
      width: 64px;
      height: 64px;
      margin: auto;
      background: url("../assets/imgs/rotate.png") center center no-repeat;
      background-size: contain;
      -webkit-animation: rotate 5s linear infinite;
      -o-animation: rotate 5s linear infinite;
      animation: rotate 5s linear infinite;
      position: absolute;
      left: -2px;
      top: -2px;
    }
    @keyframes rotate {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }
    @-webkit-keyframes rotate {
      0% {
        -webkit-transform: rotate(0deg);
      }
      100% {
        -webkit-transform: rotate(360deg);
      }
    }

    .twinkle {
      width: 48px;
      height: 48px;
      position: absolute;
      left: 6px;
      top: 6px;
      background: url("../assets/imgs/raw.png") center center no-repeat;
      background-size: contain;
      -webkit-animation: twinkle 3s infinite;
      -o-animation: twinkle 3s infinite;
      animation: twinkle 3s infinite;
    }
    @keyframes twinkle {
      0% {
        opacity: 1;
      }
      50% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }
    @-webkit-keyframes twinkle {
      0% {
        opacity: 1;
      }
      50% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }
  }


}
